/* Tabs */
:root {
    --tab-color: var(--text-color);
    --tab-hover-color: var(--primary-text-color);
    --tab-active-color: var(--primary-text-color);
    --tab-highlight-color: var(--primary-color);
}

.tab {
    align-items: center;
    border-bottom: var(--border-width) solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: var(--unit-1) 0 calc(var(--unit-1) - var(--border-width)) 0;

    & .tab-item {
        margin-top: 0;

        & a {
            border-bottom: var(--border-width-lg) solid transparent;
            color: var(--tab-color);
            display: block;
            margin: 0 var(--unit-2) 0 0;
            padding: var(--unit-2) var(--unit-1) calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
            text-decoration: none;

            &:focus,
            &:hover {
                color: var(--tab-hover-color);
            }
        }

        &.active a,
        & a.active {
            border-bottom-color: var(--tab-highlight-color);
            color: var(--tab-active-color);
        }

        &.tab-action {
            flex: 1 0 auto;
            text-align: right;
        }

        & .btn-clear {
            margin-top: calc(-1 * var(--unit-1));
        }
    }

    &.tab-block {
        & .tab-item {
            flex: 1 0 0;
            text-align: center;

            & a {
                margin: 0;
            }

            & .badge {
                &[data-badge]::after {
                    position: absolute;
                    right: var(--unit-h);
                    top: var(--unit-h);
                    transform: translate(0, 0);
                }
            }
        }
    }

    &:not(.tab-block) {
        & .badge {
            padding-right: 0;
        }
    }
}